<style scoped>
.arrow{
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 5vh;
    left: 0;
    font-size: 1.8vh;
    line-height: 5vh;
    z-index: 1000;
}
.grey{
    color: #ddd;
}
.page_this{
    color: #207A84;
}
</style>
<template>
  <div class="pdf" style="height:100%" >
    <div v-if="showType == 'pdf'">
        <p class="arrow">
            <span @click="changePdfPage(0)" class="turn"  :class="{grey: currentPage==1}">上一页</span>
            <span class="page_this">{{currentPage}}</span> / <span>{{pageCount}}</span>
            <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
        </p>
        <pdf 
            :src="fileSrc"
            :page="currentPage" 
            @num-pages="pageCount=$event" 
            @page-loaded="currentPage=$event"
            @loaded="loadPdfHandler"
        ></pdf>
    </div>
    <iframe v-else-if="showType=='iframe'" :src="fileSrc" frameborder="0" style="width: 100%; height: 100%"></iframe>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
    name:'pdfViewer',
  components: { pdf },
  props: {
     fileSrc: String
  },
  data() {
    return {
      //  showType:'iframe',
      showType:'pdf',
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: "pdf" // 文件类型
      //   src: '@/static/cfjy.vue', // pdf文件地址
    };
  },

  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
        // console.log(this.currentPage)
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
        // console.log(this.currentPage)
      }
    },

    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    }
  },
  mounted(){
 console.log("this.src="+this.fileSrc)
  },
  created() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    // this.src = pdf.createLoadingTask(this.src);
   
  }
};
</script>